<template>
  <view>
    <u-loading-page :loading="pageLoading"></u-loading-page>

    <hx-navbar ref="hxnb" :config="config" @clickBtn="clickBtn">
      <view slot="bottom">
        <template>
          <view class="input-product">
            <u-search placeholder="搜索" v-model="searchData.keywords" @change="onSearchChange" :showAction="false"></u-search>
          </view>
        </template>
      </view>
    </hx-navbar>

    <scroll-view class="" scroll-y refresher-enabled show-scrollbar :refresher-triggered="triggered"
                 @refresherrefresh="$u.throttle(onRefresherrefresh, 200)" @scrolltolower='$u.throttle(onScrolltolower,1000)'
                 :style="{height: `${screenHeight}px`, paddingTop: '60px'}">

      <u-empty mode="list" v-if="listData.length === 0" :style="{height: `${screenHeight}px`}" />

      <!-- 列表 -->
      <view class="view p-l-10 p-r-10">
		<view class="item-box" v-for="(item, index) in listData" :key="index">
			<u-avatar shape="square"
				 style="width: auto; padding: 0 20rpx; height: 48rpx; border-radius:0;"
				 :text="item.name"
			            fontSize="14"
						randomBgColor
						@click="onCheck(index)"
			    ></u-avatar>
				<view class="del" v-if="isEdit" @click="onDel(item)">
					X
				</view>
		</view>
      </view>

    </scroll-view>

    <u-modal :show="addShow"  title="添加卖点" showCancelButton @close="addShow = false"  @cancel="addShow = false"  @confirm="onAdd">
      <view class="slot-content">
        <u--input
            placeholder="卖点名称"
            border="surround"
            v-model="addValue"
        ></u--input>
      </view>
    </u-modal>
	<!-- 删除 -->
	<u-modal :show="isDel" showCancelButton :closeOnClickOverlay="true" @close="isDel = false"  @cancel="isDel = false" @confirm="onConfirm">
	  <view class="slot-content">
	    你确定要删除<text v-if="name">【{{name}}】</text>吗？
	  </view>
	</u-modal>
  </view>
</template>

<script>
import _ from 'lodash'

import {
  getlabelForCustomerData,
  // labelForCustomerAdd,
} from '@/apis/bill/information/custom'

export default {
  data() {
    return {
      searchData: {},
      screenHeight: 0,
      pageLoading: true,
      triggered: false,
      listData: [],
      pageInfo: {
        current: 1, // 当前页
        size: 999, // 每页数据条数
        sort: '', // 排序字段
        order: 'desc', // 排序方向
        total: 0 // 总数居量
      },
      config: {
        title: "卖点",
        color: "#ffffff",
        //背景颜色;参数一：透明度（0-1）;参数二：背景颜色（array则为线性渐变，string为单色背景）
        backgroundColor: [1, ["#409EFF", "#409EFF", "#60b4f6", "#60b4f6"]],
        rightButton: [
          {
            key: "btn1",
            icon: "&#xe727;",
            position: "left",
          },
		  {
		    key: "btn2",
		    icon: "&#xe727;",
		    position: "left",
		  },
        ],
      },
      addShow: false,
      addValue: '',
	  isEdit: false,
	  isDel: false,
	  name: '',
	  id: ''
    }
  },
  onLoad() {
    this.initData()
  },
  onReady() {
    const sysInfo = uni.getSystemInfoSync()
    this.screenHeight = sysInfo.windowHeight
  },
  methods: {
    initData() {
      this.listPage()
    },
    listPage() {
      const params = {
        page: this.pageInfo,
        data: this.searchData
      }
      uni.showLoading({
        title: "加载中"
      })
      getlabelForCustomerData(params).then(res => {
        if (!res.flag) return
        const records = res.data || []
        this.listData = records
      }).finally(_ => {
        this.triggered = false
        this.pageLoading = false
        uni.hideLoading()
      })
    },
    onSearchChange() {
      this.handlerSearch()
    },
    handlerSearch: _.debounce(function() {
      this.listData = []
      this.listPage()
    }, 200),
    itemClick(row) {
      uni.$emit("on-emergency-degree", row)
      this.$Router.back()
    },
    onRefresherrefresh() {
      this.triggered = true
      this.listData = []
      this.listPage()
    },
    onScrolltolower() {},
    clickBtn(item) {
      if (item.key === "btn2") {
        this.addShow = true
      } else {
		this.isEdit = !this.isEdit
	  }
    },
	onDel(val) {
		this.isDel = true;
		this.name = val.name
		this.id = val.id
	},
	onConfirm() {
		// labelForCustomerDel(this.id).then(res=>{
		// 	if (!res.flag) return
		// 	this.isDel = false
		// 	this.initData()
		// })
	},
	onAdd() {
		if(!this.addValue) {
			uni.showToast({
				title: '卖点名称不能为空！'
			})
			return
		}
		// labelForCustomerAdd([...this.listData,{seq: "", name: this.addValue, sort: "", remarks: ""}]).then(res=>{
		// 	if (!res.flag) return
		// 	this.addShow = false
		// 	this.initData()
		// })
	},
	onCheck(val) {
		this.listData[val].ischeck = true
		setTimeout(()=>{
			uni.navigateBack()
			uni.$emit('custom-tags', this.listData.filter(item=>{return item.ischeck}))
		},2000)
		console.error(this.listData)
	}
  }
}
</script>

<style lang="scss" scoped>

.view {
  display: flex;
  flex-wrap: wrap;	
}

.input-product {
  width: 95%;
  margin: 20upx auto;
  border-radius: 50upx;
  height: 70upx;
  line-height: 70upx;
  color: #fff;
}
.item-box {
	position: relative;
	padding: 10rpx;
	margin-right: 20rpx;
	.del {
		background-color: #f00;
		font-size: 24rpx;
		display: inline-block;
		width: 30rpx;
		height: 30rpx;
		text-align: center;
		line-height: 30rpx;
		border-radius: 100%;
		color: #fff;
		position: absolute;
		right: 0;
		top: 0;
	}
}

</style>
